<template>
  <div v-loading="loading" element-loading-text="模型生成中...">
    <div style="width: 100%; border: 1px solid white; ">
      <el-form  ref="form" label-width="80px">
        <div class="selectItem">
          <div class="color-bar" style="background-color: rgb(192, 20, 255);"></div>
          <div class="selectTitle" >
            <el-radio v-model="radio" label="1">选择所有梁线</el-radio>
          </div>
<!--          <div class="selectedItem" v-if="oneSide">-->
<!--            <span>{{oneSide.name}}</span>-->
<!--            <span @click="removeOne">×</span>-->
<!--          </div>-->
          <div class="selectedItem"  v-for="(item, index) in beams" :key="index">
            <span>{{item.name}}</span>
            <span @click="removeBeam(index)">×</span>
          </div>
        </div>
<!--        <div style="margin-top: 10px;text-align: center;">-->
<!--          <el-button type="primary" size="small" @click="createBeam" >创建梁</el-button>-->
<!--&lt;!&ndash;          <el-button size="small"  @click="closeSplineDialog">清空梁线</el-button>&ndash;&gt;-->
<!--        </div>-->
        <div class="selectItem">
          <div class="color-bar" style="background-color: rgb(192, 20, 255);"></div>
          <div class="selectTitle" >
            <el-radio v-model="radio" label="3">选择所有肋线</el-radio>
          </div>
          <div class="selectedItem"  v-for="(item, index) in ribs" :key="index">
            <span>{{item.name}}</span>
            <span @click="removeRib(index)">×</span>
          </div>
        </div>
<!--        <div style="margin-top: 10px;text-align: center;">-->
<!--          <el-button type="primary" size="small" @click="createRib" >创建肋</el-button>-->
<!--&lt;!&ndash;          <el-button size="small"  @click="closeSplineDialog">取消</el-button>&ndash;&gt;-->
<!--        </div>-->
        <div class="selectItem">
          <div class="color-bar" style="background-color: rgb(192, 20, 255);"></div>
          <div class="selectTitle" >
            <el-radio v-model="radio" label="4">选择所有长桁线草图</el-radio>
          </div>
          <div class="selectedItem" v-if="sketch">
            <span>{{sketch.name}}</span>
            <span @click="removeSketch">×</span>
          </div>
        </div>
        <div>
          <div style="margin-top: 10px;text-align: center;">
            <el-button type="primary" size="small" @click="createSurface">确定</el-button>
            <el-button size="small"  @click="closeDialog">关闭</el-button>
          </div>
        </div>
      </el-form>

    </div>


  </div>
</template>

<script>
  import {
    Axis,
    CrownCADPlugin,
    Direction,
    PluginFunctionType,
    Point,
    PluginEventType, PluginCADToolFunctionType
  } from "../../../../nodeApp/static/lib/crowncad-plugin-sdk-0.0.1";
  export default {
    name: "Skeleton",
    data() {
      return {
        loading: false,
        type: '1',
        p: 2,   // 螺距
        oneSide: null,
        oneName: '',
        oneD:0,
        oneId:0,
        twoSide: null,
        twoName: '',
        twoD:0,
        twoId:0,
        radio: '1',
        entity: null,
        faceIds:[],
        sketchs:[],
        ribs:[],
        beams:[],
        sketch: null,
        minHeight: 170

      }
    },
    async mounted() {
      //创建插件对象
      this.crownCADPlugin = new CrownCADPlugin();
      //设置CrownCAD平台地址
      this.crownCADPlugin.setParentOrigin(window.url);
      //.设置与CrownCAD平台尝试建立连接的次数
      this.crownCADPlugin.setMaxAttempt(5);
      //设置插件在CrownCAD平台显示的尺寸
      this.crownCADPlugin.setLayout(300, 300, 600);

      // 发送与CrownCAD平台建立连接的请求
      await this.crownCADPlugin.connect()
      // 设置对话框长宽高
      await this.crownCADPlugin.request.execFunction(PluginFunctionType.LAYOUT, { minWidth: 300, width: 300, maxHeight: this.minHeight})
      // 选择元素监听函数
      this.subscribeElementPick()
      // 选择草图监听函数
      this.subscribeSketchPick()
      this.crownCADPlugin.command.clearCommand();
      // 获取机翼的相关信息
      await this.getAll()
    },
    methods: {

      // 增加对话框高度
      async addHeight() {
        this.minHeight= this.minHeight + 28
        await this.crownCADPlugin.request.execFunction(PluginFunctionType.LAYOUT, { minWidth: 310, width: 310, maxHeight: this.minHeight})
      },

      // 减少对话框高度
      async minusHeight() {
        this.minHeight= this.minHeight - 28
        await this.crownCADPlugin.request.execFunction(PluginFunctionType.LAYOUT, { minWidth: 310, width: 310, maxHeight: this.minHeight})
      },
      subscribeElementPick () {
        this.crownCADPlugin.event.subscribeElementPickEvent(res => {
        // this.crownCADPlugin.request.subscribeEvent(PluginEventType.ELEMENTPICK, res => {
          if(res.element.length) {
            if(this.radio==='1') {
              if(!this.beams.length) {
                this.beams.push(res.element[0].element)
                this.addHeight()
              } else if(this.beams[this.beams.length- 1].id!==res.element[0].element.id) {
                this.beams.push(res.element[0].element)
                this.addHeight()
              }
            } else if(this.radio==='3') {
              if(!this.ribs.length) {
                this.ribs.push(res.element[0].element)
                this.addHeight()
              } else if(this.ribs[this.ribs.length- 1].id!==res.element[0].element.id) {
                this.ribs.push(res.element[0].element)
                this.addHeight()
              }
            }
          }

        })
      },
      subscribeSketchPick () {
        this.crownCADPlugin.event.subscribeFeaturePickEvent(res => {

          if(this.radio==='4') {
            this.sketch= res.feature
            this.addHeight()
          }
        })
      },
      async getAll() {
        this.crownCADPlugin.command.clearCommand();
        // 获取机翼所有实体信息
        let res = await this.crownCADPlugin.query.getEntities()

        res.data.entities.forEach(entity => {
          // 找到实体类型并记录该实体
          if (entity.type === 4) {
            this.entity = entity
          }
        })

        // 获取该实体的的所有元素信息
        let res1 = await this.crownCADPlugin.query.getElementsByEntityId(this.entity.id);

        res1.data.elements.forEach(element => {
          // 找到根据类型19找到所有的面，并储存到面faceIds数组，前两个面即为机翼的上面和下面
          if(element.type=== 19) {
            this.faceIds.push(element)
          }
        })
      },

      async createBeam() {
        for (let i = 0; i < this.beams.length; i++) {
          await this.createTeamRequest([this.beams[i].id], '拉伸曲面' + ( i+ 3))
        }
      },

      async createRib() {
        for (let i = 0; i < this.ribs.length; i++) {
          await this.createTeamRequest([this.ribs[i].id], '拉伸曲面' + (this.beams.length+ i+ 3))
        }
      },

      // 拉伸曲面函数，现在先用固定高度来拉伸曲面
      async createTeamRequest(ids, name) {
        this.crownCADPlugin.command.clearCommand();
        this.crownCADPlugin.command.surface.extrudeSurface({
          curveIds: ids,
          extrudeType1: 1,
          // height1: 10,
          toSurface1: this.faceIds[1].id,
          draftType1: -1,
          extrudeType2: 1,
          // height2: 10,
          toSurface2: this.faceIds[0].id,
          draftType2: -1,
        },name)

        await this.crownCADPlugin.command.execute()
      },

      // 根据选择的草图，进行投影曲面操作
      async createProjectCurve() {

        // 获取选择的草图的实体id
        let res = await this.crownCADPlugin.query.getEntitiesByFeatureIds([this.sketch.id]);

        this.crownCADPlugin.command.clearCommand();
        this.crownCADPlugin.command.curve.createProjectCurve({
          projectionType: 1,
          sketches: [res.data.entities[0]?.id],
          faces: [this.faceIds[0].id,this.faceIds[1].id],
          doubleDirection: 1}, '投影曲线')
        await this.crownCADPlugin.command.execute()
      },
      //关闭对话框
      closeDialog() {
        this.crownCADPlugin.request.execFunction(PluginCADToolFunctionType.CLOSEACTIVECMD, null);
      },
      // 进行机翼的整个操作
      async createSurface() {
        // 拉伸曲面
        // await this.createTeamRequest([this.oneSide.id], '拉伸曲面1')
        // await this.createTeamRequest([this.twoSide.id], '拉伸曲面2')
        // for (let i = 0; i < this.ribs.length; i++) {
        //   await this.createTeamRequest([this.ribs[i].id], '拉伸曲面' + ( i+ 3))
        // }

        await this.createBeam()

        await this.createRib()
        // 创建投影曲面
        await this.createProjectCurve()
      },

      // 移除第一条梁直线
      removeOne() {
        this.oneSide= null
        this.minusHeight()
      },

      // 移除第二条梁直线
      removeTwo() {
        this.twoSide= null
        this.minusHeight()
      },

      // 移除肋直线
      removeRib(index) {
        this.ribs.splice(index, 1);
        this.minusHeight()
      },

      removeBeam(index) {
        this.beams.splice(index, 1);
        this.minusHeight()
      },

      // 移除草图
      removeSketch() {
        this.sketch= null
        this.minusHeight()
      }
    }
  }
</script>

<style scoped>
  >>> .el-form-item {
    margin-bottom: 0!important;
  }
  >>> .el-form-item__label {
    margin-bottom: 0!important;
  }
  >>> .el-input__suffix {
    top: 20%!important;
  }
  >>> .el-form-item {
    height: 32px!important;
  }
  >>> .el-form-item__label {
    line-height: 32px !important;
  }
  .selectItem {
    background-color: #d6eaff;
    color: #212529;
    border: 1px solid #6e7177;
    border-radius: .2rem;
    margin: .5rem .25rem;
    padding: .25rem .25rem .25rem .5rem;
    font-size: 12px;
    position: relative;
    cursor: pointer;
  }
  .color-bar {
    border-radius: 0 0 10px 0;
    height: 10px;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: .2s;
    transition: .2s;
    width: 10px;
  }
  .selectTitle {
    height: 24px;
    line-height: 24px;
  }
  .selectedItem {
    margin-left: 20px;
    padding: 5px 15px 5px 5px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
  }
  .selectedItem:hover {
    background-color: rgba(0,0,0,.1)/* 鼠标悬浮时的背景颜色 */
  }
</style>
